<template>
  <!-- 定金服务组件 -->
  <div>
    <!-- 价格 -->
    <div>
      <div
        class="background_gray padding_15 margin_top_20"
        style="border-radius: 5px; font-weight: 600"
      >
        价格
      </div>
      <!-- 价格 -->
      <label>
        <div class="flex_y_center" style="margin-top: 20px">
          <div style="width: 80px; text-align: right">
            <span>*</span>
            价格：
          </div>
          <div style="width: 15%">
            <el-input
              v-model="depositForm.goods_price"
              placeholder="请输入价格"
            >
              <template slot="prepend">￥</template>
            </el-input>
          </div>
        </div>
      </label>
    </div>
    <!-- 商品属性 -->
    <div style="margin-top: 15px">
      <div
        class="background_gray padding_15"
        style="border-radius: 5px; font-weight: 600"
      >
        商品属性
      </div>

      <!-- 营销方式 -->
      <div style="padding: 15px 0; display: flex">
        <!-- 单选 -->
        <div style="width: 80px; text-align: right">
          <span>*</span>
          营销方式：
        </div>
        <div class="flex_direction">
          <el-radio v-model="depositForm.expire_type" label="sale_at">
            销售日期
          </el-radio>
          <el-radio
            v-model="depositForm.expire_type"
            label="facture_at"
            style="margin: 15px 0"
          >
            出厂时间
          </el-radio>
          <el-radio v-model="depositForm.expire_type" label="long_at">
            永久有效
          </el-radio>
        </div>
      </div>
      <!-- 有效期输入框 -->
      <label class="flex_y_center">
        <div style="width: 80px; text-align: right">
          <span v-if="depositForm.expire_type != 'long_at'">*</span>
          有效期：
        </div>
        <el-input
          v-model="depositForm.effective_at"
          :disabled="
            depositForm.expire_type == 'long_at' ||
            depositForm.expire_type == ''
          "
          placeholder="请输入有效期天数"
          style="width: 15%"
        >
          <template slot="append">天</template>
        </el-input>
      </label>

      <!-- 开售时间 -->
      <div class="flex_y_center margin_top_20">
        <div style="width: 80px; text-align: right">
          <span>*</span>
          开售时间：
        </div>
        <div>
          <el-radio v-model="depositForm.goods_status" label="on">
            立即开售
          </el-radio>
          <el-radio v-model="depositForm.goods_status" label="off">
            放入仓库
          </el-radio>
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="margin_top_20" style="display: flex">
        <div style="width: 80px; text-align: right">商品详情：</div>
        <Vue-editor
          :goods-desc="depositForm.goods_content"
          @sendText="goodsContent"
        />
      </div>
    </div>
    <!-- 添加商品 -->
    <div style="width: fit-content; margin: 20px auto 0">
      <el-button type="primary" @click="searchForm">保存</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
      VueEditor: () => import('./editor.vue'),
    },
    props: {
      oGoodsDetailsInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        depositForm: {
          is_many_attribute: 'N', // 是否多规格
          delivery_method: 'no', // 送货方式
          goods_price: '0.00', // 商品价格
          expire_type: 'long_at', // 营销方式 sale_at销售日期, facture_at出厂日期, long_at长期
          effective_at: '', // 有效期
          goods_status: 'on', // 开售时间
          goods_content: '', // 商品详情
        },
      }
    },
    watch: {
      'depositForm.expire_type'(newValue) {
        if (newValue == 'long_at') {
          this.depositForm.effective_at = ''
        }
      },
    },
    created() {
      this.assignForm()
    },
    methods: {
      // 将需要的数据赋值到相同属性值上
      assignForm() {
        if (JSON.stringify(this.oGoodsDetailsInfo) != '{}') {
          for (let item in this.depositForm) {
            this.depositForm[item] = this.oGoodsDetailsInfo[item]
          }
        }
      },
      // 检查form表单数据是否有漏输
      searchForm() {
        if (this.depositForm.expire_type != 'long_at') {
          if (this.depositForm.effective_at == '') {
            this.$message.error('有效期未填写')
            return
          }
        }
        this.saveGoods()
      },
      // 将数据传递给父组件
      saveGoods() {
        // 将用户输入的保存，传递给父组件
        this.$emit('sendData', this.depositForm)
      },
      goodsContent(text) {
        this.depositForm.goods_content = text
      },
    },
  }
</script>

<style scoped>
  .padding_15 {
    padding: 15px;
  }
  .flex_direction {
    display: flex;
    flex-direction: column;
  }
  span {
    color: red;
  }
  .background_gray {
    background-color: rgb(248, 248, 248);
  }
  .color_shall_gray {
    color: rgba(0, 0, 0, 0.8);
  }
  .margin_top_20 {
    margin-top: 20px;
  }
</style>
